<?php if(!defined('IN_DISCUZ')) exit('Access Denied'); ?>
﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>直播详情页</title>
    <link href="source/plugin/zhibo/static/style/reset_css.css" rel="stylesheet"/>
    <link rel="stylesheet" href="source/plugin/zhibo/static/style/font/iconfont.css">
    <link href="source/plugin/zhibo/static/style/all.css" rel="stylesheet"/>
    <!--[if lt IE 9]>
    <script src="source/plugin/zhibo/static/js/respond.src.js" type="text/javascript"></script>
    <script src="source/plugin/zhibo/static/js/html5.js" type="text/javascript"></script>
    <![endif]-->
</head>
<body>


<div id="Video_Content">


    <div id="Video_Playwindow">


        <div class="VideoHeader">
            <h1 class="mainTitle">新升阳新品发布会 </h1>

            <a href="#" class="btn_livemobilephone"> <i class="iconfont icon-shouji"></i> 手机看直播 </a>
            <a href="#" class="btn_share"><i class="iconfont icon-fenxiang"></i> 分享 </a>
            <span class="total_see"><i class="iconfont icon-yanjing"></i> 323333 </span>
            <span class="total_zan" onclick="zan()"><i class="iconfont icon-appreciate"></i><?php echo $getData['0']['star'];?></span>
            <span class="clear"></span>
        </div>
        <!-- .VideoHeader结束 -->

        <div id="VideoShare">
            <div class="ewm">
                <img src="source/plugin/zhibo/static/images/ewm.jpg" alt="description "/>
            </div>

            <p>呼唤小伙伴们来看围观~ </p>

            <ul>
                <li><a href="#" class="btn_sina"><i class="iconfont icon-fenxiang201"></i></a></li>
                <li><a href="#" class="btn_qq"><i class="iconfont icon-icon"></i></a></li>
                <li><a href="#" class="btn_qzone"><i class="iconfont icon-fenxiang301"></i></a></li>
            </ul>


            <div class="copyurl">
                <input name="txt" type="text" class="text"/>
                <button class="btn_send" type="submit">复制链接</button>
            </div>

            <span class="arrow"></span>
        </div>
        <!-- VideoShare结束 -->


        <div id="MobilePhoneWatch">
            <strong>手机看直播，畅享超清画质 </strong>

            <div class="ewm">
                <img src="source/plugin/zhibo/static/images/ewm.jpg" alt="description "/>
            </div>
            <p>微信扫码在手机上继续观看</p>

            <p>二维码2小时内有效，扫码后可分享给好友</p>
            <span class="arrow"></span>
        </div>
        <!-- MobilePhoneWatch结束 -->


        <div class="VideoBox">
            <div class="dplayer" id="dplayer3"></div>
        </div>
        <!-- .VideoBox结束 -->


        <section id="Videogift">

            <a href="#" class="btn_danmu"><span class="btn_offon"></span><strong>弹幕关</strong></a>
            <a href="#" class="btn_liwu"></a><button onclick="zan()">点赞</button>


            <div id="giftList">
                <ul>
                    <li data-name="闪电水壶1" data-price="10"><img src="source/plugin/zhibo/static/images/icon1.png"><span
                            class="arrow3"></span></li>
                    <li data-name="闪电水壶2" data-price="20"><img src="source/plugin/zhibo/static/images/icon2.png"><span
                            class="arrow3"></span></li>
                    <li data-name="闪电水壶3" data-price="30"><img src="source/plugin/zhibo/static/images/icon3.png"><span
                            class="arrow3"></span></li>
                    <li data-name="闪电水壶4" data-price="40"><img src="source/plugin/zhibo/static/images/icon4.png"><span
                            class="arrow3"></span></li>
                    <li data-name="闪电水壶5" data-price="50"><img src="source/plugin/zhibo/static/images/icon5.png"><span
                            class="arrow3"></span></li>
                </ul>
            </div>
            <!-- giftList结束 -->


            <section id="giftsend">
                <div class="giftsend_box">
                    <div class="photo">
                        <img src="source/plugin/zhibo/static/images/icon1.png">
                    </div>
                    <h4><strong>闪电水壶</strong> <em>（2 OL币） </em></h4>
                    <textarea name="textarea" id="gift_ly" cols="" rows="4"> </textarea>

                    <p class="tips">可用OL币：100个<a href="#"> 充值 </a></p>
                </div>
                <dl>
                    <dt> 批量赠送：</dt>
                    <dd>
                        <ul class="sl_select">
                            <li class="change">1</li>
                            <li>66</li>
                            <li>520</li>
                            <li>666</li>
                            <li>1314</li>
                        </ul>
                        <button class="btn_send" onclick="add()">发 送</button>
                    </dd>
                </dl>
            </section>
            <!-- giftsend结束 -->

        </section>
        <!-- Videogift结束 -->


    </div>
    <!-- Video_Playwindow结束 -->


    <section id="Video_hudong">

        <ul class="Tab2">
            <li class="change"><a href="#">直播互动</a></li>
            <li><a href="#">节目介绍</a></li>
        </ul>
        <span class="clear"></span>

        <div class="Tab_nr">
            <div class="Scroll_box" data-scroll="1" data-scroll-height="577" data-scroll-width="318">


            </div>

            <div class="Charform">
                <input name="content" id="content" type="text" class="text"/>
                <button class="btn_send" >发送</button>
            </div>
        </div>
        <!-- .Tab_nr结束 -->
        <div class="Tab_nr">
            <div class="Scroll_box" data-scroll="1" data-scroll-height="640" data-scroll-width="318">

                <section id="VideoJieshao">
                    <h3 class="introduceTitle">新升阳新品发布会 </h3>
                    <span class="livetime"><i class="iconfont icon-time_fill"></i> 直播：2016/11/09 18:30—2016/11/10 20:30 </span>

                    <div class="content">
                        <!-- 文章内容开始 -->
                        <p><?php echo $getData['0']['channelDescribe'];?></p>

                        <!-- 文章内容结束 -->
                    </div>

                </section>
                <!-- VideoJieshao结束 -->

            </div>
        </div>
        <!-- .Tab_nr结束 -->
    </section>
    <!-- Video_hudong结束 -->


    <span class="clear"></span>
    <!-- 清除浮动 -->
</div>
<!-- Video_Content结束 -->


<div class="ad">
    <a href="#" class="photo"> <img src="source/plugin/zhibo/static/images/banner.jpg" alt="description "/></a>
</div>
<!-- .ad结束 -->


<section id="Recommend">
    <h3 class="PartTitle"> 推荐直播</h3>

    <div class="Recommend_nr">
        <div class="Video_">
            <a href="#" class="photo"><img src="source/plugin/zhibo/static/temp_img/69874.jpg" alt="description "/></a>
            <strong><a href="#">新升阳新品发布会 </a></strong>
            <ins>12,275感兴趣</ins>
            <time><span class="icon_time"> </span> 2016-11-30 10:00:00</time>
            <a href="#" class="btn_play"><i class="iconfont icon-bofang1"></i></a>
        </div>

        <div class="Video_">
            <a href="#" class="photo"><img src="source/plugin/zhibo/static/temp_img/69874.jpg" alt="description "/></a>
            <strong><a href="#">新升阳新品发布会 </a></strong>
            <ins>12,275感兴趣</ins>
            <time><span class="icon_time"> </span> 2016-11-30 10:00:00</time>
            <a href="#" class="btn_play"><i class="iconfont icon-bofang1"></i></a>
        </div>

        <div class="Video_">
            <a href="#" class="photo"><img src="source/plugin/zhibo/static/temp_img/69874.jpg" alt="description "/></a>
            <strong><a href="#">新升阳新品发布会 </a></strong>
            <ins>12,275感兴趣</ins>
            <time><span class="icon_time"> </span> 2016-11-30 10:00:00</time>
            <a href="#" class="btn_play"><i class="iconfont icon-bofang1"></i></a>
        </div>

        <div class="Video_">
            <a href="#" class="photo"><img src="source/plugin/zhibo/static/temp_img/69874.jpg" alt="description "/></a>
            <strong><a href="#">新升阳新品发布会 </a></strong>
            <ins>12,275感兴趣</ins>
            <time><span class="icon_time"> </span> 2016-11-30 10:00:00</time>
            <a href="#" class="btn_play"><i class="iconfont icon-bofang1"></i></a>
        </div>

        <span class="clear"></span>
    </div>

    <button id="tj">添加</button>

</section>
<!-- Recommend结束 -->
<script src="source/plugin/zhibo/static/js/jquery.js" type="text/javascript"></script>
<script src="https://rawgit.com/mrdoob/stats.js/master/build/stats.min.js" type="text/javascript"></script>
<script src="source/plugin/zhibo/static/plugin/flv.min.js" type="text/javascript"></script>
<script src="source/plugin/zhibo/static/plugin/hls.min.js" type="text/javascript"></script>
<script src="source/plugin/zhibo/static/dist/DPlayer.min.js" type="text/javascript"></script>

<script>
    // Live Video (HTTP Live Streaming, M3U8 format) support
    var dp3 = new DPlayer({
        element: document.getElementById('dplayer3'),
        autoplay: false,
        theme: '#FADFA3',
        loop: true,
        screenshot: true,
        hotkey: true,
        video: {
            url: 'http://4027.liveplay.myqcloud.com/4027_7e75601ea7b111e69776e435c87f075e.m3u8',
            pic: 'http://devtest.qiniudn.com/若能绽放光芒.png'
        },
        danmaku: {
            id: '9E2E3368B56CDBB42',
            api: 'https://api.prprpr.me/dplayer/',
            token: 'tokendemo',
            maximum: 3000
        }
    });


    // stats.js: JavaScript Performance Monitor
    var stats = new Stats();
    stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
    document.body.appendChild(stats.dom);
    function animate() {
        stats.begin();
        // monitored code goes here
        stats.end();

        requestAnimationFrame(animate);
    }
    requestAnimationFrame(animate);
</script>

<script>
    function zan() {
        var a = $(".total_zan").text();
        var b = parseInt(a)+1;
        $(".total_zan").html('<i class="iconfont icon-appreciate"></i>'+b);

        $.ajax({
            type: "POST",
            url : 'plugin.php?id=zhibo&ac=activity&op=zan&identify=<?php echo $data;?>',
            dataType : "json",

        });

    }

</script>

<script>
    contentlist();
    function add() {
        var content = $("#content").val();
        if (content.trim() == '') {
            document.getElementById("content").placeholder = "请输入评论";
            return;
        }
        $.ajax({
            type: "POST",
            url: "plugin.php?id=zhibo",
            data: "mod=ajax&ac=add_comment&channelId=<?php echo $data;?>&content=" + content,
            dataType: "json",
            success: function (data) {
                console.log(data);
                if (data) {
                    var str = '<div class="ChatRecord" data-comment-id=' + data.id + '>';
                    str += '  <div class="photo"><img src="https://id.olbike.com/member/avatar.php?uid=' + data.uid + '&amp;size=small" alt="description" /></div>';
                    str += '  <div class="Record_nr">';
                    str += '  <span class="user_name">' + data.username + ' </span>';
                    str += '  <p>' + data.content + ' </p>';
                    str += ' <span class="floor_name">' + data.id + 'F </span>';
                    str += ' </div>';
                    str += '<span class="arrow2"></span>';
                    str += '</div>';

                    //评论每次向头部提交
                    $('.Scroll_box').append(str);
                } else {
                    alert("添加失败！");
                }
            }
        });
    }

    //更新评论内容
    setInterval("getnewcomment()", 1000);
    function getnewcomment() {
        var zid = $(".Scroll_box .ChatRecord:last-child").attr('data-comment-id');
        $.ajax({
            type: "POST",
            url: "plugin.php?id=zhibo",
            data: 'mod=ajax&ac=comment&identify=<?php echo $data;?>&zid=' + zid,
            dateType: "json",
            success: function (list) {
                var obj = $.parseJSON(list);
                if (obj.length > 0) {
                    for (var i = 0; i < obj.length; i++) {
                        var str = '<div class="ChatRecord" data-comment-id=' + obj[i].id + '>';
                        str += '  <div class="photo"><img src="https://id.olbike.com/member/avatar.php?uid=' + obj[i].uid + '&amp;size=small" alt="description" /></div>';
                        str += '  <div class="Record_nr">';
                        str += '  <span class="user_name">' + obj[i].username + ' </span>';
                        str += '  <p>' + obj[i].content + ' </p>';
                        str += ' <span class="floor_name">' + obj[i].id + 'F </span>';
                        str += ' </div>';
                        str += '<span class="arrow2"></span>';
                        str += '</div>';

                        $(".Scroll_box").append(str);
                    }
                }
            },
        });
    }

    setInterval("contentlist()", 3000);
    //内容列表
    function contentlist() {
        var zid = $(".Scroll_box .ChatRecord:last-child").attr('data-comment-id');
        $.ajax({
            type: "POST",
            url: "plugin.php?id=zhibo",
            data: 'mod=ajax&ac=comment&identify=<?php echo $data;?>&zid=' + zid,
            dataType: "json",
            success: function (list) {
                console.log(list);
                var content = $(".Scroll_box");
                if (list.length > 0) {
                    for (var i = 0; i < list.length; i++) {
                        var str = '<div class="ChatRecord" data-comment-id=' + list[i].id + '>';
                        str += '  <div class="photo"><img src="https://id.olbike.com/member/avatar.php?uid=' + list[i].uid + '&amp;size=small" alt="description" /></div>';
                        str += '  <div class="Record_nr">';
                        str += '  <span class="user_name">' + list[i].username + ' </span>';
                        str += '  <p>' + list[i].content + ' </p>';
                        str += ' <span class="floor_name">' + list[i].id + 'F </span>';
                        str += ' </div>';
                        str += '<span class="arrow2"></span>';
                        str += '</div>';

                        content.append(str);
                    }
                }
            },
        });
    }
</script>

<script src="source/plugin/zhibo/static/js/easyscroll.js" type="text/javascript"></script>
<script src="source/plugin/zhibo/static/js/mousewheel.js" type="text/javascript"></script>
<script src="source/plugin/zhibo/static/style/font/iconfont.js" type="text/javascript"></script>
<script src="source/plugin/zhibo/static/js/load.js" type="text/javascript"></script>
<script src="source/plugin/zhibo/static/js/jquery.nicescroll.js" type="text/javascript"></script>


</body>
</html>

